<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="base">
        <div class="grid-container">
            <div class="grid-item grid-item-1">1</div>
            <div class="grid-item grid-item-2">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>  
            <div class="grid-item">7</div>  
            <div class="grid-item">8</div>  
            <div class="grid-item">9</div>  
        </div>

        <hr class="hr-solid-content" data-content="area">

        <div class="grid-area-container">
            <div class="grid-item grid-item-header">header</div>
            <div class="grid-item grid-item-left">left</div>
            <div class="grid-item grid-item-main">main</div>
            <div class="grid-item grid-item-right">right</div>
            <div class="grid-item grid-item-footer">footer</div>
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    padding: 10px;
    overflow: auto;
}

.grid-container {
    height: 200px;
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    grid-template-rows: 40px 1fr 30px;
    gap: 5px;
    justify-items: stretch;
    align-items: stretch;
    grid-auto-flow: row;
}

.grid-item {
    padding: 8px;
    background: #eee;
    border: 1px solid #ccc;
}

.grid-item-1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    justify-self: stretch;
}

.grid-item-2 {
    grid-row-start: 1;
    grid-row-end: 3;
    align-self: stretch;
}

.grid-area-container {
    height: 200px;
    display: grid;
    gap: 5px;
    grid-template-columns: 100px 1fr 30px;
    grid-template-rows: 40px 1fr 30px;
    grid-template-areas:
        "header header header"
        "left main right"
        "footer footer footer";
}

.grid-item-header {
    grid-area: header;
}

.grid-item-left {
    grid-area: left;
}

.grid-item-main {
    grid-area: main;
}

.grid-item-right {
    grid-area: right;
    writing-mode: vertical-lr;
}

.grid-item-footer {
    grid-area: footer;
}
</style>